<template>
  <div id="home" style="position: relative">
    <HeaderPage />
    <div class="content">
      <div class="courseContent">
        <!-- 教师要求 -->
        <div
          style="
            border: 1px solid #ddd;
            margin-bottom: 20px;
            border-radius: 10px;
          "
        >
          <div
            style="
              color: #333333;
              font-size: 14px;
              background: #f5f5f5;
              padding: 10px 15px;
            "
          >
            <h3 style="font-size: 16px">{{ work.title }}</h3>
          </div>
          <div>
            <div>
              <dl>
                <dt>作业内容:</dt>
                <dd>
                  {{ work.content }}
                </dd>

                <dt>附件:</dt>
                <dd v-for="(item,index) in work.attachments.split(',')" :key="index">
                    <a :href="'http://localhost:8080' + item">{{ item.split('/').pop() }}</a>
                </dd>

                <dt>作业类型:</dt>
                <dd>满分100分，教师评分，个人作业</dd>

                <dt>截止时间:</dt>
                <dd>{{ work.upToTime }}</dd>

                <dt>其他说明:</dt>
                <dd>{{ work.other }}</dd>
              </dl>
            </div>
          </div>
        </div>

        <!-- 作业提交 -->
        <div
          style="
            border: 1px solid #ddd;
            margin-bottom: 20px;
            border-radius: 10px;
          "
        >
          <div
            style="
              color: #333333;
              font-size: 14px;
              background: #f5f5f5;
              padding: 10px 15px;
            "
          >
            <h3 style="font-size: 16px">写作业</h3>
          </div>
          <div>
            <div>
              <dl>
                <dt>提交时间:</dt>
                <dd>2024-11-12</dd>

                <dt>作业文件:</dt>
                <dd>
                  <file-upload v-model="submit.attachments"></file-upload>
                </dd>

                <el-button
                  type="primary"
                  style="margin-top: 20px"
                  @click="submitBtn"
                  >提交作业</el-button
                >
              </dl>
            </div>
          </div>
        </div>

        <!-- 评语 -->
        <div
          style="
            border: 1px solid #ddd;
            margin-bottom: 20px;
            border-radius: 10px;
          "
        >
          <div
            style="
              color: #333333;
              font-size: 14px;
              background: #f5f5f5;
              padding: 10px 15px;
            "
          >
            <h3 style="font-size: 16px">评语</h3>
          </div>

          <div v-if="submit !== null && submit.state === 3">
            <div>
              <dl>
                <dt>评分:</dt>
                <dd>{{ submit.score }}</dd>

                <dt>评语</dt>
                <dd>{{ submit.comment }}</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderPage from "@/components/HeaderPage.vue";
import FileUpload from "@/components/FileUpload.vue";
import {submitWork, workInfo} from "@/api/work"
export default {
  data() {
    return {
      workId: "",
      form: {
        attachments: "",
      },
      courseId:'',
      submit:{
        attachments: "",
      },
      work:{
        attachments:"",
      },
    };
  },
  components: {
    HeaderPage,
    FileUpload,
  },
  mounted() {
    this.workId = this.$route.query.workId;
    this.courseId = this.$route.query.courseId;
    this.getInfo();
  },
  methods: {
    submitBtn() {
      this.form.workId = this.workId;
      this.form.attachments = this.submit.attachments;
      submitWork(this.form).then(res => {
        if(res.code === 200){
          this.$message("提交成功!")
        }
      }).catch(()=>{})
    },
    getInfo(){
      workInfo(this.workId).then(res => {
        if(res.code === 200){
          if(res.work !== null){
            this.work = res.work;
          }
          if(res.submit!== null){
            this.submit = res.submit;
          }
        }
      })
    }
  },
};
</script>

<style scoped>
.content {
  background-image: url("../../assets/images/home-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 900px;
  position: fixed;
  width: 100%;
  left: 0;
  top: 80px;
  overflow: auto;
}

.courseContent {
  padding: 20px;
  width: 80%;
  background-color: white;
  margin: 60px auto;
  border-radius: 10px;
}
.course:hover {
  cursor: pointer;
}

dl {
  margin-left: 180px;
}
dt {
  padding: 10px;
  font-weight: 700;
}
dd {
  width: 600px;
  word-break: break-all;
}
</style>
